<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组扩展</title>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <!-- 
        1.Array.of
        语法：Array.of( ...args )
        作用：声明/定义数组

        2.Array.from
        语法：Array.from( arrayLike )
        作用：把伪数组转换成数组

     -->
    <!-- 
        forEach
        forEach主要用于数组的简单遍历

        map
        map函数对数组的每个元素执行回调函数，并返回含有运算结果的新数组

        filter
        filter是过滤的意思，它对数组每个元素执行回调函数，返回回调函数执行结果为true的元素。

        every
        every返回布尔值 true/false ，数组的每个元素执行回调函数，如果执行结果全为 true ，every 返回 true，否则返回 false 。

        some
        some 与 every 功能类似，都是返回布尔值。只要回调函数结果有一个 true，some便返回 true，否则返回 false。

        reduce
        对数组中的所有元素调用指定的回调函数。 该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。

        includes
        includes方法用于判断字符串是否包含指定的子字符串。
     -->
    <script>

        // 1.==============================数组新增方法=====================================
        // 1.1Array.of 创建数组
        //1.1.1字面量
        let arr1 = [1, 2, 3]

        //1.1.2构造函数
        // let arr2 = new Array(1)
        // console.log(arr2)//[1]
        let arr3 = new Array(3)
        // console.log(arr3)//[空属性 × 3]

        // 1.1.3Array.
        let arr4 = Array.of(3)
        // console.log(arr4)//[3]


        // 1.2Array.from 将伪数组（有下标 有长度 不能使用数组上的方法）转换真数组
        // 能够获取伪数组结果的场景有哪些？获取函数的剩余参数arguments、dom节点获取
        function sum(a, b, c, d) {
            // arguments是个伪数组
            // console.log(arguments)
            // // 检测是不是一个数组
            // console.log(Array.isArray(arguments))//false
            // console.log(arguments instanceof Array)//false

            // 将arguments转换为真正的数组
            let arr5 = Array.from(arguments)
            console.log(arr5)
        }
        // sum(1, 2, 3, 4)

        let lis = document.querySelectorAll('li')
        // console.log(Array.from(lis))

         // copyWithin()
    // 数组实例的copyWithin方法，在当前数组内部，
    // 将指定位置的成员复制到其他位置（会覆盖原有成员），
    // 然后返回当前数组。target、start、end三个参数
    // console.log([1,2,3,4,5,6].copyWithin(0,3,5))

    // find的()和findIndex()
    //数组实例的find方法，用于找出第一个符合条件的数组成员
    //数组实例的findIndex方法，用于找出第一个符合条件的数组成员的下标
    // const  ar = [1,2,-1,-2,4,-5]
    // console.log(ar.find(num=>num<0))

    // const user = [
    //     {id:1,name:"tome"},
    //     {id:2,name:"king"},
    //     {id:3,name:"queen"},
    // ]
    // const arr1 = user.find((u)=>{
    //    return u.id === 2
    // })

    // console.log(arr1)

    // function isEven(num) {
    //     return  num % 2 === 0;
    // }

    // const nums = [1,3,4,7,8]

    // console.log(nums.find(isEven,this))



    // console.log(arr.findIndex(function (item,index) {
    //     console.log(item,index)
    //     return item == "c";
    // }))

    // const  ar1 = [1,20,-10,-28,46,-59]
    // console.log(ar1.findIndex(num=>num>1))


    // const  ar2 = ["red","yellow","blue"]
    // console.log(ar2.findIndex(item=>item==="yellow"))

    // const users = [
    //     {id:1,name:"tome"},
    //     {id:2,name:"king"},
    //     {id:3,name:"queen"},
    // ]

    // console.log(users.findIndex(user=> user.name === "queen"))

    // const  str = "Hello World";
    // console.log(str.split("").findIndex(char => char==="W"))

        // 2.============================数组新增遍历=====================================
        // 2.1forEach
        // forEach主要用于数组的简单遍历 通过抛出异常( throw new Error() )停止循环
        // let userList = [{ id: 1, name: "李四" }, { id: 2, name: "张三" }]
        // userList.forEach((item, index) => {
        //     // console.log('下标是：', index)
        //     // console.log('值是：', item.name, item.id)
        //     if (index == 0) {
        //         throw new Error('主动退出循环了')
        //     }
        //     console.log(index)//没有打印结果代表循环终止了
        // })

        // 2.2map
        // map函数对数组的每个元素执行回调函数，并返回含有运算结果的新数组
        // let shopList = [
        //     { id: 1, title: "手机1" },
        //     { name: "手机2" },
        //     { id: 2, title: "手机3" }
        // ]
        // // 会返回遍历的每一项结果，不存在数据默认为undefined  返回的新数组的长度不变  
        // // [{title:"手机1"},{title:"手机3"}]
        // let ShopData = shopList.map((item, index) => {
        //     // 返回了需要的title
        //     return { title: item.title }
        // })
        // console.log(ShopData)//['手机1', undefined, '手机3']


        // 2.3filter
        // filter是过滤的意思，它对数组每个元素执行回调函数，不满足条件的数据默认以false处理,返回回调函数执行结果为true的元素。
        // let cartList = [
        //     { id: 1, status: true, name: "商品1" },
        //     { id: 2, status: false, name: "商品2" },
        //     { id: 3, status: true, name: "商品3" },
        //     // { id: 4, name: "商品4" }
        //     { id: 4 }
        // ]

        // // let cartData = cartList.filter((item, index) => {
        // //     return item.name
        // // })
        // // console.log(cartData)

        // let userData = cartList.filter((item, index) => {
        //     return item.status
        // })
        // console.log(userData)


        // 2.4every
        // every返回布尔值 true/false，数组的每个元素执行回调函数，
        // 不满足条件的数据默认以false处理,如果执行结果全为true ，
        // every 返回 true，否则返回 false 。
        // let cartsList = [
        //     { id: 1, status: true, name: "商品1" },
        //     { id: 2, status: true, name: "商品2" },
        //     { id: 3, status: true, name: "商品3" },
        //     {}
        // ]
        // let res = cartsList.every((item, index) => {
        //     // 用每条对象数据中的status作为检测的条件
        //     // return item
        //     return item.status
        // })
        // console.log('every:', res)

        // 应用场景：处理购物车状态管理

        //  [] {} 隐式转换的话都是true不是false
        // if({})true


        // 2.5some
        // some 与 every 功能类似，都是返回布尔值。不满足条件的数据默认以false处理,只要回调函数结果有一个true，some便返回 true，否则返回 false。
        // let cartssList = [
        //     { id: 1, status: false, name: "商品1" },
        //     { id: 2, status: true, name: "商品2" },
        //     { id: 3, status: false, name: "商品3" },
        //     { id: 4, name: "商品4" }
        // ]
        // let res = cartssList.some((item, index) => {
        //     return item.status
        // })
        // console.log('some:', res)//true


        // 2.6reduce
        // 对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果，
        // 并且此返回值在下一次调用该回调函数时作为参数提供。
        // prev:上一次的计算结果，每次都要返回给下一次的循环
        // arr:原数组
        // 统计和
        let score = [90, 80, 100]
        // 初次：prev = 0
        // 第一次：prev（0） += 90
        // 第二次：prev（90） += 80
        // 第二次：prev（170） += 100 = 270
        // let count = score.reduce((prev, item, index, arr) => {
        //     prev += item
        //     // 切记每次处理完prev的值一定要返回
        //     return prev
        // }, 0)//0在次代表的是求和的起始值 就是prev的初始值
        // console.log(count)//270

        // 求已经购买的商品支付总金额
        let goodList = [
            { price: '20', num: '2', status: true },
            { price: 15, num: 3, status: false },
            { price: 30, num: 10, status: true }
        ]
        // let goodCount = goodList.reduce((prev, item, index) => {
        //     // 每次循环计算每件商品的金额（单价*数量）
        //     return prev += parseFloat(item.price) * parseInt(item.num)
        // }, 0)
        // console.log(goodCount)//385

        // 求已经购买的商品支付总金额和购买商品总数量
        // let sums = goodList.reduce((prev, item, index) => {
        //     prev[0] += parseFloat(item.price) * parseInt(item.num)
        //     prev[1] += parseInt(item.num)
        //     return prev
        // }, [0, 0])//[0,0]下标0的值表示的是商品金额 下标1的值表示的商品数量 prev默认值是数组
        // console.log(sums)

        let sums = goodList.reduce((prev, item, index) => {
            prev.countMoney += parseFloat(item.price) * parseInt(item.num)
            prev.countNumber += parseInt(item.num)
            return prev
        }, { countMoney: 0, countNumber: 0 })//countMoney表示的是商品金额 countNumber的值表示的商品数量 prev默认值是对象
        console.log(sums)

        arr4.fill(6)  //fill   填充
        console.log(arr4)//


    </script>

</body>

</html>